<template>
  <div class="school">
    <h2 @click="showName">学校名称:{{ name }}</h2>
    <h2>学校地址:{{ address }}</h2>
  </div>

  <!-- 
    ## mixin(混入)

1. 功能：可以把多个组件共用的配置提取成一个混入对象

2. 使用方式：

    第一步定义混合：另写一个js文件，要在需要混合的文件中通过import引入

    ```
    {
        data(){....},
        methods:{....}
        ....
    }
    ```

    第二步使用混入：

    ​	全局混入：```Vue.mixin(xxx)```
    ​	局部混入：```mixins:['xxx']	```main.js中写
   -->
</template>

<script>
import { hunHe } from "../mixin.js";

export default {
  name: "School",
  data: function () {
    return {
      name: "尚硅谷",
      address: "北京",
    };
  },
  // 局部混合
  mixins: [hunHe], //混合即复用配置，没有的就加，有的就合并/整合(不是替换),如果遇到冲突的，以主文件(school.vue)为主
  //但是生命周期的钩子函数（例：mounted）例外，混合里的，主文件里的都会执行，不会谁为主，来者不拒，先执行混合里的钩子，在执行主文件里的钩子
  mounted() {
    console.log("hello!!!");
  },
};
</script>

<style>
</style>